<template>
	<!-- 验证码登录 -->
	<view>
		<u-form :model="form" ref="uForm" label-position="top">
			<u-form-item label="手机号" prop="mobile">
				<u-input v-model="form.mobile" placeholder="请输入手机号" />
			</u-form-item>
			<u-form-item label="验证码" prop="captcha">
				<u-input v-model="form.captcha" placeholder="请输入验证码" />
				<text slot='right' class="captcha" @tap="getCode">{{tips}}</text>
			</u-form-item>
		</u-form>
		<view class="mt152 pl40 pr40">
			<u-button @click="submit" type="primary">登录</u-button>
		</view>
		<view class="text-center mt46 register" @click="$jump('/pages/register/register')">
			<text>立即注册</text>
		</view>
		<u-verification-code :seconds="60" ref="uCode" @change="codeChange" unique-key="login" :keep-running="true">
		</u-verification-code>
	</view>
</template>

<script>
	import getcode from '@/mixins/getcode.js'
	export default {
		name: "captchaLogin",
		//获取验证码
		mixins:[getcode],
		data() {
			return {
				//tab栏
				current: 0,
				//form表单
				form: {
					mobile: '',
					captcha: '',
				},
				tips: '获取验证码', //获取验证码
			};
		},
		methods: {
			submit() {
				if (!this.form.mobile) {
					return this.$msg('手机号不能为空')
				}
				if (!this.form.captcha) {
					return this.$msg('验证码不能为空')
				}
				this.$api.mobilelogin(this.form).then(res => {
					this.$msg(res.msg)
					uni.setStorageSync('userInfo', res.data.userinfo)
					uni.setStorageSync('token', res.data.userinfo.token)
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/home/home'
						})
					}, 500)
				})
			},
			codeChange(text) {
				this.tips = text;
			}
		}
	}
</script>

<style lang="scss">
	.captcha,
	.register {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: bold;
		text-decoration: underline;
		color: #1385FF;
	}

	.register {
		color: #6D788B;
	}
</style>
